<template>
	<div>
		<vxe-form ref="formRef" size="mini" :data="formData" @submit="submitEvent" @reset="resetEvent">
			<vxe-form-item title="报价单号" field="companyId" span="3" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.companyId" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>
			<vxe-form-item title="公司名称" field="companyName" span="3" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.companyName" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>
			<vxe-form-item title="报价单状态" field="customerInquiryStatus" span="3" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.customerInquiryStatus" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>
			<vxe-form-item title="创建人" field="createdBy" span="3" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.createdBy" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>

			<vxe-form-item title="创建时间" field="createdOn" span="3" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.createdOn" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>
			<vxe-form-item title="报价时间" field="quotedOn" span="3" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.quotedOn" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>
			<vxe-form-item title="过期时间" field="expiredOn" span="3" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.expiredOn" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>
			<vxe-form-item title="备注" field="comment" span="5" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.comment" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>
			<vxe-form-item title="省" field="stateProvince" span="2" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.stateProvince" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>
			<vxe-form-item title="市" field="city" span="2" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.city" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>
			<vxe-form-item title="区" field="district" span="2" :item-render="{}">
				<template #default="params">
					<vxe-input v-model="formData.district" @change="changeEvent(params)"></vxe-input>
				</template>
			</vxe-form-item>

			<!-- <vxe-form-item align="center" span="24" :item-render="{}">
        <template #default>
          <vxe-button type="submit" status="primary" content="提交"></vxe-button>
          <vxe-button type="reset" content="重置"></vxe-button>
        </template>
      </vxe-form-item> -->
		</vxe-form>
	</div>
	<vxe-toolbar size="mini" :buttons="toolbarButtons" @button-click="buttonClickEvent" ref="toolbarRef"
		custom></vxe-toolbar>
	<vxe-table ref="tableRef" size="mini" height="1000" max-height="800" align="center" border stripe
		:row-config="{ isCurrent: true, isHover: true }" :data="tableData" :edit-config="editConfig" keep-source>
		<vxe-column type="seq" width="70"></vxe-column>
		<vxe-column type="checkbox" width="50" align="center"></vxe-column>
		<vxe-column field="sku" title="易买商品号(SKU)" :edit-render="{ name: 'input' }"></vxe-column>
		<vxe-column field="manufacturerPartNumber" title="客户物料号" :edit-render="{ name: 'input' }"></vxe-column>
		<vxe-column field="productName" title="产品名称" show-overflow></vxe-column>
		<vxe-column field="brandName" title="品牌名称" show-overflow></vxe-column>
		<vxe-column field="quantity" title="购买数量" :edit-render="{ name: 'input' }"></vxe-column>
		<vxe-column field="unitPrice" title="商品价格"></vxe-column>
		<vxe-column field="deliveryTimeName" title="交期时间" show-overflow></vxe-column>
		<vxe-column field="series" title="商品系列" show-overflow></vxe-column>
		<vxe-column field="pictureUrl" title="商品图片" show-overflow></vxe-column>
		<vxe-column field="packQty" title="包装数"></vxe-column>
		<vxe-column field="packUom" title="包装单位" show-overflow></vxe-column>
		<vxe-column field="attributesJsonString" title="商品属性" show-overflow></vxe-column>
		<vxe-column field="itemNo" title="项目编号"></vxe-column>
		<vxe-column field="action" title="操作" width="140">
			<template #default="{ row }">
				<vxe-button  status="error" @click="removeRow(row)">删除</vxe-button>
			</template>
		</vxe-column>
	</vxe-table>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { VxeUI } from 'vxe-table'
import { ref, onMounted } from 'vue';
const tableData = ref([{}]);
const tableRef = ref(null);
const toolbarRef = ref(null);
const editConfig = {
	trigger: 'click',
	mode: 'cell'
}
const formData = ref({});
const toolbarButtons = [
	{
		name: "刷新",
		code: "刷新",
		status: "primary",
	},
	{
		name: "新增",
		code: "新增",
		status: "primary",
	},
	{
		name: "保存",
		code: "保存",
		status: "primary",
	}
];

const getList = () => {
	VxeUI.loading.open({
        text: '数据加载中，请稍后...'
      })
	const route = useRoute();
	const id =route.params.id;
	Meteor.call("getQuotationDetail", id,(err, res) => {
		if (err) {
			console.error("调用错误:", err.message);
		} else {
			tableData.value = res.data.items;
			formData.value = res.data;
			console.log(res.data);
			VxeUI.loading.close()
		}
	});
};

const pushEvent = () => {
	const $table = tableRef.value
	if ($table) {
		const record = {
			name: `Name_${new Date().getTime()}`
		}
		const { row: newRow } = $table.insertAt(record, -1)
		$table.setEditCell(newRow, 'name')
	}
};

const removeRow = (row) => {
	const $table = tableRef.value
	if ($table) {
		$table.remove(row)
		VxeUI.modal.message({
			content: '数据已删除',
			status: 'success'
		})
	}
};

const changeEvent = (params) => {
	const $form = formRef.value
	if ($form) {
		$form.updateStatus(params)
	}
};
const submitEvent = () => {
	VxeUI.modal.message({ content: '保存成功', status: 'success' })
};
const resetEvent = () => {
	VxeUI.modal.message({ content: '重置事件', status: 'info' })
}

//存货上传
const buttonClickEvent = ({ code }) => {
	if (code === "刷新") {
		location.reload();
		return;
	}
	if (code === "新增") {
		pushEvent();
		return;
	}
	if (code === "保存") {
		const $table = tableRef.value;
		const InquiryId = formData.value.id;
		const insertRecords = $table.getInsertRecords().map(item => ({ ...item, inquiryItmeType: 2 }));
		const updateRecords = $table.getUpdateRecords().map(item => ({ ...item, inquiryItmeType: 0 }));
		const removeRecords = $table.getRemoveRecords().map(item => ({ ...item, inquiryItmeType: 1 }));
		//合并数组
		const list = [...insertRecords, ...updateRecords, ...removeRecords];
		if (list.length === 0) {
			VxeUI.modal.alert(`没有编辑任何数据！`);
			return;
		}
		const filteredList = list.map(({ inquiryItemId, sku, quantity, manufacturerPartNumber, itemNo, inquiryItmeType, productName, brand }) => ({
			inquiryItemId, sku, quantity, manufacturerPartNumber, itemNo, inquiryItmeType, productName, brand
		}));
		const _jsonData = {
			InquiryId, 
			UpdateItems: filteredList
		};
		Meteor.call("editQuotation", _jsonData, (err, res) => {
			console.log(res);
			if(res.code === 200){
				VxeUI.modal.message({ content: res.message, status:'success' })
			}else{
				VxeUI.modal.alert(res.message);	
			}
		});

	}
}


onMounted(() => {
	getList();
	//console.log(getBalance());
});
</script>
